今日介紹 PrimeVue 的 Toast 組件實現這類即時通知。
適用情境:
當雙11等大促期間,網購平台的用戶點擊心儀的商品時,系統可以彈出提示訊息,
提醒用戶商品已成功加入購物車,這樣能提高用戶的參與感和滿足感。
第14天,心靈雞湯一下~
You must expect great things of yourself before you can do them.
你必須先見到很棒的自己,才能做出很棒的事。
export default defineNuxtConfig({
primevue: {
components: {
prefix: "p-",
include: [
"toast",
]
},
},
plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});
import { defineNuxtPlugin } from '#app'
import ToastService from "primevue/toastservice";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue);
nuxtApp.vueApp.use(ToastService);
});
主要用來註冊 PrimeVue 和 ToastService,使其能夠在 Nuxt 應用中全局使用。
PrimeVue 的 Toast 元件依賴於 ToastService 來控制消息提示的彈出。
<template>
<div class="card flex justify-content-center">
<p-toast position="top-left" group="tl" />
<p-toast position="bottom-left" group="bl" />
<p-toast position="bottom-right" group="br" />
<div class="flex flex-wrap gap-2">
<p-button label="Top Left" @click="showTopLeft" />
<p-button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<p-button label="Bottom Right" severity="help" @click="showBottomRight" />
</div>
</div>
</template>
<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();
const showTopLeft = () => {
toast.add({
severity: "info",
summary: "Info Message",
detail: "Message Content",
group: "tl",
life: 3000,
});
};
const showBottomLeft = () => {
toast.add({
severity: "warn",
summary: "Warn Message",
detail: "Message Content",
group: "bl",
life: 3000,
});
};
const showBottomRight = () => {
toast.add({
severity: "success",
summary: "Success Message",
detail: "Message Content",
group: "br",
life: 3000,
});
};
</script>
這種即時通知都能大大提高用戶的互動感,讓用戶在操作商品時獲得即時反饋。